import React from 'react';
import { Search } from 'lucide-react';
import { cn } from '@/lib/utils';

// 搜索输入框属性接口
interface SearchInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'className' | 'size'> {
  // 搜索图标位置
  iconPosition?: 'left' | 'right';
  // 是否显示搜索图标
  showIcon?: boolean;
  // 输入框尺寸
  size?: 'sm' | 'md' | 'lg';
  // CSS类名
  className?: string;
  // 容器CSS类名
  containerClassName?: string;
}

// 尺寸样式映射
const sizeClasses = {
  sm: {
    input: 'py-1.5 px-3 text-sm',
    icon: 'w-4 h-4',
    padding: 'pl-8', // 左侧图标时的padding
  },
  md: {
    input: 'py-2 px-3 text-sm',
    icon: 'w-4 h-4',
    padding: 'pl-9', // 左侧图标时的padding
  },
  lg: {
    input: 'py-3 px-4 text-base',
    icon: 'w-5 h-5',
    padding: 'pl-11', // 左侧图标时的padding
  },
};

/**
 * 搜索输入框组件
 * 带搜索图标的输入框，支持多种尺寸和图标位置
 * 
 * @example
 * // 基础用法
 * &lt;SearchInput 
 *   placeholder="Search collections..." 
 *   onChange={handleSearchChange}
 * /&gt;
 * 
 * // 自定义尺寸和样式
 * &lt;SearchInput
 *   size="lg"
 *   iconPosition="right"
 *   className="border-blue-300"
 *   placeholder="搜索内容..."
 * /&gt;
 * 
 * // 不显示图标
 * &lt;SearchInput showIcon={false} placeholder="输入关键词..." /&gt;
 */
export const SearchInput: React.FC<SearchInputProps> = ({
  iconPosition = 'left',
  showIcon = true,
  size = 'md',
  className,
  containerClassName,
  id,
  name,
  ...props
}) => {
  // 获取尺寸相关样式
  const sizeStyles = sizeClasses[size];
  
  // 生成默认的id和name属性，确保无障碍性
  const inputId = id || 'search-input';
  const inputName = name || 'search';

  return (
    // 搜索输入框容器
    <div className={cn('relative flex items-center', containerClassName)}>
      {/* 左侧搜索图标 */}
      {showIcon && iconPosition === 'left' && (
        <Search 
          className={cn(
            'absolute left-3 text-gray-400 z-10 pointer-events-none',
            sizeStyles.icon
          )} 
        />
      )}
      
      {/* 搜索输入框 */}
      <input
        id={inputId}
        name={inputName}
        type="text"
        className={cn(
          // 基础样式
          'w-full border border-gray-300 rounded-md outline-none transition-colors',
          'bg-gray-50 focus:border-blue-500 focus:bg-white',
          // 尺寸样式
          sizeStyles.input,
          // 图标相关的padding
          showIcon && iconPosition === 'left' && sizeStyles.padding,
          showIcon && iconPosition === 'right' && 'pr-9',
          // 自定义样式
          className
        )}
        {...props}
      />
      
      {/* 右侧搜索图标 */}
      {showIcon && iconPosition === 'right' && (
        <Search 
          className={cn(
            'absolute right-3 text-gray-400 z-10 pointer-events-none',
            sizeStyles.icon
          )} 
        />
      )}
    </div>
  );
};